"use client";
import PageClient from "./pageClien";
import { useState, useEffect, Fragment, CSSProperties } from "react";
import { useRouter } from 'next/navigation';
import Image from "next/image";

export default () => {
  const [apiData, setApiData] = useState<{ id: number }[]>([]);
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const ur = useRouter()

  useEffect(() => {
    const fetchData = async () => {
      const dataJson: { id: number }[] = await (
        await fetch(`/af/api/getData`)
      ).json();
      setApiData(dataJson);
    };
    fetchData();
  }, []);
  const Dalog = () => {
    return (
      <div style={fullscreenDivStyle}>
      <div style={imageStyle}>
        <Image src={"/af/next.svg"} alt="aka" width={200} height={200} />
        <button onClick={() => {
            ur.back();
            setIsVisible(false)
        }}> Back</button>
      </div>
    </div>
    )
  }
  return (
    <Fragment>
      {isVisible && <Dalog />}
      <PageClient popser={apiData} stskktFun={setIsVisible} />
    </Fragment>
  );
};
const fullscreenDivStyle: CSSProperties = {
  backgroundColor: "rgba(192,192,192,0.5)",
  position: "fixed",
  top: 0,
  left: 0,
  width: "100vw",
  height: "100vh",
  zIndex: 9999,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};
const imageStyle: CSSProperties = {
  position: "absolute", // 绝对定位
  top: "0", // 距离顶部 50px
  left: "0", // 距离左边 50px
};
